import { StyleSheet, Dimensions } from 'react-native'
import getBorderWidth from '../../../utils/onePixel'

const getImageSize = () => {
  const windowWidth = Dimensions.get('window').width
  const imageWidth = (windowWidth - 30) / 2
  const imageHeight = imageWidth * 0.6666667
  return {
    imageWidth,
    imageHeight
  }
}

const styles = StyleSheet.create({
  // box
  container: {
    flex: 1
  },

  // swiper
  wrapper: {
    height: 260
  },
  
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },

  swiperImg: {
    width: '100%',
    height: '100%'
  },

  // hotcate
  hotcateWrapper: {
    backgroundColor: '#fff',
  },

  hotcateTitle: {
    height: 50,
    textAlign: 'left',
    justifyContent: 'center',
    paddingLeft: 15,
    borderBottomWidth: getBorderWidth(),
    borderBottomColor: '#ccc'
  },

  hotcateTitleText: {
    color: '#666',
  },

  hotcateList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingVertical: 15
  },

  hotcateItem: {
    width: '33.333333%',
    alignItems: 'center',
    justifyContent: 'center'
  },

  hotcateImage: {
    width: 60,
    height: 60,
    borderRadius: 5
  },

  hotcateNameText: {
    paddingVertical: 10,
    paddingBottom: 20,
    textAlign: 'center'
  },



  // top10
  top10Wrapper: {

  },

  top10List: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingLeft: 10
  },

  top10Item: {
    width: '50%',
    marginTop: 10,
    paddingRight: 10
  },

  top10Image: {
    width: getImageSize().imageWidth,
    height: getImageSize().imageHeight
  },

  top10TextWrapper: {
    height: 60,
    width: '100%',
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center'
  },

  top10TextTitle: {
    fontSize: 18
  },

  top10TextSubTitle: {
    fontSize: 12,
    color: '#666'
  }
})

export default styles